<template>
  <view>
    <m-top :autoBack="true" :bgChangeByScroll="true" bgColor="#8C82FF" @getHeight="getGlHeight"> 个人信息 </m-top>

    <m-container :top="glTop">
      <view class="pdv40 ">
        <!--  -->
        <view class="mgt40">
          <m-card :padding="false">
            <view class="cell-group">
              <view class="cell-item flex align-center">
                <view class="font32 c333">通知提醒</view>
                <view class="mglauto">
                  <u-switch size="16" v-model="noticeState" activeColor="#481EC1"></u-switch>
                </view>
              </view>

              <view class="cell-item flex align-center">
                <view class="font32 c333">官方公众号</view>
                <view class="mglauto">
                  <u-icon name="arrow-right" size="24rpx" color="#666666"></u-icon>
                </view>
              </view>

              <view class="cell-item flex align-center" @click="$u.route({
                url: '/pages-details/privacy/index',
                params: {
                  id: 678,
                  title: '隐私政策'
                }
              })">
                <view class="font32 c333">隐私政策</view>
                <view class="mglauto">
                  <u-icon name="arrow-right" size="24rpx" color="#666666"></u-icon>
                </view>
              </view>

              <view class="cell-item flex align-center" @click="$u.route({
                url: '/pages-details/privacy/index',
                params: {
                  id: 679,
                  title: '用户协议'
                }
              })">
                <view class="font32 c333">用户协议</view>
                <view class="mglauto">
                  <u-icon name="arrow-right" size="24rpx" color="#666666"></u-icon>
                </view>
              </view>

              <view class="cell-item flex align-center">
                <view class="font32 c333">联系客服</view>
                <view class="mglauto">
                  <u-icon name="arrow-right" size="24rpx" color="#666666"></u-icon>
                </view>
              </view>
            </view>
          </m-card>
        </view>

      </view>
    </m-container>

    <m-foot>
      <view class="pdv40" style="padding-bottom: 40rpx;">
        <u-button type="primary" color="#481EC1" text="退出登录" @click="loginOutHandler" :customStyle="{
            height: '84rpx',
            'border-radius': '20rpx',
            'box-shadow': ' 0rpx 2rpx 12rpx 0rpx rgba(27,166,131,0.0988)',
            'font-size': '32rpx',
          }"></u-button>
      </view>
    </m-foot>
  </view>
</template>

<script>
import GlTopMixin from "@/mixins/global-top";

export default {
  mixins: [GlTopMixin],
  components: {},
  data() {
    return {
      noticeState: true,
    }
  },



  methods: {
    loginOutHandler() {
      uni.showModal({
        title: '提示',
        content: '是否退出登录？',
        success:  (res) => {
          if (res.confirm) {
            this.$store.dispatch('loginOut');
            uni.clearStorage(); // 清除缓存
            uni.reLaunch({
               url: '/pages/index/index'
            });

          }
        }
      });
    }
  },
};
</script>

<style lang="scss" scoped>
/deep/ .u-upload__wrap {
  justify-content: center;
}

.card-avatar {
  position: relative;

  &__wrapper {
    position: relative;
    border: 4rpx solid #ffffff;
    border-radius: 50%;
    overflow: hidden;
    width: 220rpx;
    height: 220rpx;

    .tips {
      position: absolute;
      bottom: 16rpx;
      left: 50%;
      transform: translateX(-50%);
      background: rgba(0, 0, 0, 0.4);
      padding: 10rpx 8rpx;
      border-radius: 8rpx;
      z-index: 1;
      line-height: 1;
      white-space: nowrap;
    }

    .img {
      width: 100%;
      height: 100%;
    }
  }
}

.cell-group {
  padding: 0 32rpx;

  .cell-item {
    padding: 38rpx 0;

    .cell-check {
      &:not(:first-child) {
        margin-left: 58rpx;
      }

      .label {
        margin-left: 8rpx;
      }

      .radio {
        width: 24rpx;
        height: 24rpx;
        border-radius: 50%;
        border-radius: 12rpx;
        border: 2rpx solid #dedede;
      }

      .active {
        border-color: transparent;
        position: relative;

        &::after {
          content: "";
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%);
          border-radius: 50%;
          width: 8rpx;
          height: 8rpx;
          border: 8rpx solid #5347ff;
        }
      }
    }
  }
}
</style>
